<template>
	<view>
		<view v-for="(item, index) in imglist1" :key="item + index"><image :src="item" mode="aspectFit"></image></view>
		<view>图片宽度:{{ imginfo.width }}px,单位是px</view>
		<view>图片高度:{{ imginfo.height }}px,单位是px</view>
		<view>图片本地路径:{{ imginfo.path }}</view>
		<button type="default" @click="pai" size="mini">直接打开相机，拍照后获取图片信息显示在页面（单图）</button>
		<view style="border: 2px solid orange;"></view>
		<view v-for="(item, index) in imglist2" :key="item + index"><image :src="item" mode=""></image></view>
		<button type="default" @click="pai2" size="mini">可以选择相机，或者相册,预览后显示在页面（多图）</button>
		<view style="border: 2px solid orange;"></view>
		<button type="default" @click="pai3" size="mini">直接打开相机，拍照后保存图片到系统相册(小程序和app生效)</button>
		<view style="border: 2px solid orange;"></view>
		图片压缩前：
		<image :src="yaimg" mode=""></image>
		<image :src="yaimgafter" mode=""></image>
		<button type="default" @click="pai4" size="mini">压缩图片(小程序，app生效)</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imglist1: [],
			imginfo: {},
			imglist2: [],
			yaimg: require('@/static/logobg.jpg'),
			yaimgafter:null,
		};
	},
	methods: {
		pai() {
			let _this = this;
			uni.chooseImage({
				sourceType: ['camera'],
				success: function(res) {
					// _this.pai = JSON.stringify(res.tempFilePaths);
					_this.imglist1 = [];
					_this.imglist1.push(res.tempFilePaths[0]);
					//获取图片信息
					uni.getImageInfo({
						src: res.tempFilePaths[0],
						success: function(image) {
							console.log(image);
							_this.imginfo = image;
						}
					});
				}
			});
		},
		pai2() {
			let _this = this;
			uni.chooseImage({
				count: 6, //默认9
				sourceType: ['album'], //从相册选择
				success: function(res) {
					_this.imglist2.push(res.tempFilePaths[0]);
					// 预览图片
					uni.previewImage({
						urls: res.tempFilePaths,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				}
			});
		},
		pai3() {
			let _this = this;
			uni.chooseImage({
				sourceType: ['camera'],
				success: function(res) {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePaths[0],
						success: function() {
							console.log('save success');
						}
					});
				}
			});
		},
		pai4() {
			let _this = this;
			uni.compressImage({
			  src: '/static/logobg.jpg',
			  quality: 50,//压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）
				width:'150px',
				height:'150px',
				rotate:45,  //Number  旋转度数，范围0～360
			  success: res => {
					console.log(res);
					_this.yaimgafter = res.tempFilePath
			  },
				complete(){
					console.log('执行完毕');
				}
			})
		}
	}
};
</script>

<style></style>
